<template>
  <BaseContainer>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="onTabClick" tabPosition="left">
      <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name">
        <component  v-if="tabName == item.name" :is="item.component"></component>
      </el-tab-pane>
    </el-tabs>
  </BaseContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DataExpiresConfig from './DataExpiresConfig/index.vue'
import DataExpiresNotice from './DataExpiresNotice/index.vue'
import DataExpiresNotifRecords from './DataExpiresNotifRecords/index.vue'
import DataExpiresReminderRules from './DataExpiresReminderRules/index.vue'
import SmsTemplates from './SmsTemplates/index.vue'

let activeName = ref('1')
const tabs = [
  { label: '数据过期配置表', name: '1', component: DataExpiresConfig },
  { label: '数据过期通知', name: '2', component: DataExpiresNotice },
  { label: '数据过期通知记录', name: '3', component: DataExpiresNotifRecords },
  { label: '过期提醒规则', name: '4', component: DataExpiresReminderRules },
  { label: '信息模版', name: '5', component: SmsTemplates },
]
let tabName = ref('1')
const onTabClick = (tab) => {
  tabName = tab.props.name
}
</script>

<style scoped></style>
